<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                overflow: hidden;
                position: relative;
                width: 500px;
                height: 500px;
                background: mediumpurple;
            }
            img{
                width: 200px;
                height: 300px;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -150px 0 0 -100px;
                transform-origin: center bottom;
                transition: all 0.5s;
            }
            div:hover img:nth-of-type(1){
                transform: rotateZ(-30deg);
                box-shadow: 0 0 5px 5px yellow;
            }
            div:hover img:nth-of-type(2){
                transform: rotateZ(-15deg);
                transition-delay: 0.2s;
                box-shadow: 0 0 5px 5px green;
            }
            div:hover img:nth-of-type(3){
                box-shadow: 0 0 5px 5px lightgoldenrodyellow;
            }
            div:hover img:nth-of-type(4){
                transform: rotateZ(15deg);
                transition-delay: 0.2s;
                box-shadow: 0 0 5px 5px red;
            }
            div:hover img:nth-of-type(5){
                transform: rotateZ(30deg);
                box-shadow: 0 0 5px 5px palegreen;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="k.png" alt="">
            <img src="k.png" alt="">
            <img src="k.png" alt="">
            <img src="k.png" alt="">
            <img src="k.png" alt="">
        </div>
    </body>
</html>